import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:async';

// 全局颜色常量（贴合360安全服务网页风格）
const Color COLOR_NAV_BG = Color(0xFF2C3E50); // 导航栏背景色
const Color COLOR_NAV_HOVER = Color(0xFF34495E); // 导航项hover色
const Color COLOR_PRIMARY = Color(0xFF3498DB); // 主色调（蓝）
const Color COLOR_TITLE = Color(0xFF222222); // 标题色
const Color COLOR_CONTENT = Color(0xFF666666); // 内容文本色
const Color COLOR_CARD_BG = Colors.white; // 卡片背景色
const Color COLOR_PAGE_BG = Color(0xFFF5F7FA); // 页面背景色

// 导航项模型（支持二级菜单）
class NavbarItem {
  final String title;
  final List<SubMenuItem>? subItems; // 二级菜单（null表示无二级菜单）

  NavbarItem({
    required this.title,
    this.subItems,
  });
}

// 二级菜单项模型
class SubMenuItem {
  final String title;
  final void Function(BuildContext context) onTap; // 点击回调

  SubMenuItem({
    required this.title,
    required this.onTap,
  });
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '360安全培训服务',
      theme: ThemeData(
        primaryColor: COLOR_PRIMARY,
        scaffoldBackgroundColor: COLOR_PAGE_BG,
        textTheme: const TextTheme(
          titleLarge: TextStyle(
            fontSize: 32,
            fontWeight: FontWeight.bold,
            color: COLOR_TITLE,
          ),
          titleMedium: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: COLOR_TITLE,
          ),
          titleSmall: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: COLOR_TITLE,
          ),
          bodyLarge: TextStyle(
            fontSize: 16,
            color: COLOR_CONTENT,
            height: 1.6,
          ),
          bodyMedium: TextStyle(
            fontSize: 14,
            color: COLOR_CONTENT,
            height: 1.6,
          ),
        ),
      ),
      home: const SafeTrainingPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

// 安全培训服务主页面（含导航栏二级弹框逻辑）
class SafeTrainingPage extends StatefulWidget {
  const SafeTrainingPage({super.key});

  @override
  State<SafeTrainingPage> createState() => _SafeTrainingPageState();
}

class _SafeTrainingPageState extends State<SafeTrainingPage> {
  // 导航栏数据（模拟360安全服务导航结构）
  final List<NavbarItem> _navbarItems = [
    NavbarItem(title: '首页', subItems: null),
    NavbarItem(
      title: '安全服务',
      subItems: [
        SubMenuItem(
          title: '安全培训服务',
          onTap: (context) => ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('当前已在安全培训服务页面')),
          ),
        ),
        SubMenuItem(
          title: '应急响应指导',
          onTap: (context) => ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('跳转至应急响应指导页面')),
          ),
        ),
        SubMenuItem(
          title: '网络安全攻防',
          onTap: (context) => ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('跳转至网络安全攻防页面')),
          ),
        ),
        SubMenuItem(
          title: '红队攻防服务',
          onTap: (context) => ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('跳转至红队攻防服务页面')),
          ),
        ),
      ],
    ),
    NavbarItem(
      title: '解决方案',
      subItems: [
        SubMenuItem(
          title: '企业安全方案',
          onTap: (context) => ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('跳转至企业安全方案页面')),
          ),
        ),
        SubMenuItem(
          title: '政府安全方案',
          onTap: (context) => ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('跳转至政府安全方案页面')),
          ),
        ),
        SubMenuItem(
          title: '金融安全方案',
          onTap: (context) => ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('跳转至金融安全方案页面')),
          ),
        ),
      ],
    ),
    NavbarItem(title: '客户案例', subItems: null),
    NavbarItem(title: '关于我们', subItems: null),
  ];

  int? _currentHoveredIndex; // 当前hover的导航项索引
  bool _isPopupVisible = false; // 二级弹框是否显示
  List<SubMenuItem>? _currentSubItems; // 当前弹框的二级菜单
  Timer? _hidePopupTimer; // 延迟隐藏弹框的计时器（防止快速划过误隐藏）

  // -------------------------- 二级弹框交互逻辑 --------------------------
  // 导航项hover进入：显示对应二级弹框
  void _onNavItemEnter(int index) {
    _hidePopupTimer?.cancel(); // 取消之前的隐藏计时器
    final item = _navbarItems[index];
    if (item.subItems != null && item.subItems!.isNotEmpty) {
      setState(() {
        _currentHoveredIndex = index;
        _currentSubItems = item.subItems;
        _isPopupVisible = true;
      });
    } else {
      // 无二级菜单：隐藏弹框，仅高亮导航项
      setState(() {
        _isPopupVisible = false;
        _currentHoveredIndex = index;
      });
    }
  }

  // 导航项hover离开：延迟隐藏弹框
  void _onNavItemExit(int index) {
    _hidePopupTimer = Timer(const Duration(milliseconds: 200), () {
      if (mounted) {
        setState(() {
          _currentHoveredIndex = null;
          _isPopupVisible = false;
        });
      }
    });
  }

  // 二级弹框hover进入：取消隐藏（保持弹框显示）
  void _onPopupEnter() {
    _hidePopupTimer?.cancel();
    setState(() => _isPopupVisible = true);
  }

  // 二级弹框hover离开：延迟隐藏
  void _onPopupExit() {
    _hidePopupTimer = Timer(const Duration(milliseconds: 200), () {
      if (mounted) {
        setState(() {
          _isPopupVisible = false;
          _currentHoveredIndex = null;
        });
      }
    });
  }

  // 计算二级弹框的left位置（根据导航项索引）
  double _calculatePopupLeft(int index) {
    final screenWidth = MediaQuery.of(context).size.width;
    final navItemWidth = screenWidth >= 1024 ? 120.0 : 80.0; // 桌面端/移动端导航项宽度
    return index * navItemWidth;
  }

  // 点击无二级菜单的导航项
  void _onNavItemTap(String title) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('点击了「$title」导航项')),
    );
  }

  @override
  void dispose() {
    _hidePopupTimer?.cancel(); // 页面销毁时取消计时器
    super.dispose();
  }

  // -------------------------- 导航栏构建 --------------------------
  Widget _buildNavbar() {
    final screenWidth = MediaQuery.of(context).size.width;
    final isDesktop = screenWidth >= 1024; // 桌面端判断
    final navItemWidth = isDesktop ? 120.0 : 80.0; // 导航项宽度适配

    return Container(
      height: 60,
      color: COLOR_NAV_BG,
      child: Stack(
        children: [
          // 导航项列表
          Row(
            children: _navbarItems.asMap().entries.map((entry) {
              final index = entry.key;
              final item = entry.value;
              final isHovered = _currentHoveredIndex == index;

              return MouseRegion(
                onEnter: (_) => _onNavItemEnter(index),
                onExit: (_) => _onNavItemExit(index),
                cursor: SystemMouseCursors.click,
                child: GestureDetector(
                  onTap: () => _onNavItemTap(item.title),
                  child: Container(
                    width: navItemWidth,
                    alignment: Alignment.center,
                    color: isHovered ? COLOR_NAV_HOVER : Colors.transparent,
                    child: Text(
                      item.title,
                      style: const TextStyle(color: Colors.white, fontSize: 16),
                      overflow: TextOverflow.ellipsis, // 防止标题过长溢出
                    ),
                  ),
                ),
              );
            }).toList(),
          ),

          // 二级弹框（仅当有二级菜单且hover时显示）
          if (_isPopupVisible &&
              _currentHoveredIndex != null &&
              _currentSubItems != null)
            Positioned(
              top: 60, // 弹框在导航栏正下方
              left: _calculatePopupLeft(_currentHoveredIndex!),
              width: 200, // 弹框固定宽度
              child: MouseRegion(
                onEnter: (_) => _onPopupEnter(),
                onExit: (_) => _onPopupExit(),
                child: Container(
                  decoration: BoxDecoration(
                    color: COLOR_CARD_BG,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black12,
                        blurRadius: 8,
                        offset: const Offset(0, 2),
                      ),
                    ],
                    borderRadius: const BorderRadius.only(
                      bottomLeft: Radius.circular(4),
                      bottomRight: Radius.circular(4),
                    ),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: _currentSubItems!.map((subItem) {
                      return GestureDetector(
                        onTap: () => subItem.onTap(context),
                        child: Container(
                          padding: const EdgeInsets.symmetric(
                            horizontal: 16,
                            vertical: 12,
                          ),
                          child: Text(
                            subItem.title,
                            style: const TextStyle(
                              color: COLOR_TITLE,
                              fontSize: 14,
                            ),
                          ),
                        ),
                      );
                    }).toList(),
                  ),
                ),
              ),
            ),
        ],
      ),
    );
  }

  // -------------------------- 主体内容构建 --------------------------
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: COLOR_PAGE_BG,
      body: Column(
        children: [
          // 1. 顶部导航栏（固定）
          _buildNavbar(),

          // 2. 主体内容（可滚动）
          Expanded(
            child: SingleChildScrollView(
              padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 30),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 页面标题
                  const Text(
                    '安全培训服务',
                    style: TextStyle(
                      fontSize: 32,
                      fontWeight: FontWeight.bold,
                      color: COLOR_TITLE,
                      height: 1.2,
                    ),
                  ),
                  const SizedBox(height: 40),

                  // 模块1：服务介绍
                  const _ServiceIntro(),
                  const SizedBox(height: 50),

                  // 模块2：前期准备→实施培训→成果汇报流程
                  _PreparationProcess(),
                  const SizedBox(height: 50),

                  // 模块3：7大服务功能
                  _ServiceFunctions(),
                  const SizedBox(height: 50),

                  // 模块4：3大服务优势
                  _ServiceAdvantages(),
                  const SizedBox(height: 50),

                  // 模块5：客户案例
                  _CustomerCases(),
                  const SizedBox(height: 50),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

// -------------------------- 主体内容模块组件 --------------------------
// 模块1：服务介绍
class _ServiceIntro extends StatelessWidget {
  const _ServiceIntro();

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '服务介绍',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: COLOR_TITLE,
          ),
        ),
        const SizedBox(height: 20),
        Text(
          '安全培训服务将依据客户需求提供安全培训服务，安全培训的课程可根据客户需求定制，例如针对 IT 部门人员开展技能培训、为企业员工提供安全科普、为敏感部门员工提供安全意识培训服务，培训时长视培训内容而定。',
          style: Theme.of(context).textTheme.bodyLarge,
        ),
      ],
    );
  }
}

// 模块2：前期准备→实施培训→成果汇报流程
class _PreparationProcess extends StatelessWidget {
  _PreparationProcess();

  // 流程数据：分3个阶段，每个阶段包含对应步骤
  final List<ProcessPhase> _processPhases = [
    ProcessPhase(
      name: '前期准备',
      steps: ['确定培训需求', '制定培训计划', '确定培训方式', '完成课件编写'],
    ),
    ProcessPhase(
      name: '实施培训',
      steps: ['授课讲解'],
    ),
    ProcessPhase(
      name: '成果汇报',
      steps: ['培训效果评估', '培训总结复盘'],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '前期准备 → 实施培训 → 成果汇报',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: COLOR_TITLE,
          ),
        ),
        const SizedBox(height: 30),

        // 流程阶段横向布局（桌面端3列，移动端1列）
        LayoutBuilder(
          builder: (context, constraints) {
            final isDesktop = constraints.maxWidth >= 1024;
            return isDesktop
                ? Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: _buildProcessColumns(),
                  )
                : Column(
                    children: _buildProcessColumns(),
                  );
          },
        ),
      ],
    );
  }

  // 构建每个流程阶段的列（含阶段名+步骤）
  List<Widget> _buildProcessColumns() {
    return _processPhases.map((phase) {
      return Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 阶段名称（蓝色高亮）
            Text(
              phase.name,
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                color: COLOR_PRIMARY,
              ),
            ),
            const SizedBox(height: 15),

            // 阶段步骤（白色卡片）
            Column(
              children: phase.steps.map((step) {
                return Container(
                  margin: const EdgeInsets.symmetric(vertical: 8),
                  padding:
                      const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
                  decoration: BoxDecoration(
                    color: COLOR_CARD_BG,
                    borderRadius: BorderRadius.circular(4),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black12,
                        blurRadius: 2,
                        offset: const Offset(0, 1),
                      ),
                    ],
                  ),
                  child: Text(
                    step,
                    style: TextStyle(
                      fontSize: 14,
                      color: COLOR_CONTENT,
                    ),
                  ),
                );
              }).toList(),
            ),
          ],
        ),
      );
    }).toList();
  }
}

// 流程阶段模型
class ProcessPhase {
  final String name;
  final List<String> steps;

  ProcessPhase({required this.name, required this.steps});
}

// 模块3：7大服务功能
class _ServiceFunctions extends StatelessWidget {
  _ServiceFunctions();

  // 7大服务功能数据
  final List<ServiceFunction> _functions = [
    ServiceFunction(
      title: '1. 基础安全意识培训服务',
      desc:
          '针对安全意识等信息提供培训服务，使被培训者通过学习了解到当前网络存在的安全风险和隐患，提升客户非技术人员的整体安全意识和安全防护能力。',
    ),
    ServiceFunction(
      title: '2. 应急响应指导培训服务',
      desc:
          '针对应急响应工作提供培训服务，使被培训者通过学习了解到应急响应的实施方式和问题排查的思路，使客户达到可处理常规的安全事件、进行应急响应工作的能力。',
    ),
    ServiceFunction(
      title: '3. 网络安全攻防渗透培训服务',
      desc:
          '针对安全攻防、漏洞挖掘提供培训服务，使被培训者通过学习了解到漏洞挖掘的思路和方法，达到能够独立实施常规的漏洞挖掘工作，协助客户完成安全测试的闭环。',
    ),
    ServiceFunction(
      title: '4. 应用与软件安全开发培训服务',
      desc: '针对安全开发SDL提供培训服务，使被培训者通过学习了解到SDL的内容和流程，协助其建立内部SDL的规范。',
    ),
    ServiceFunction(
      title: '5. 安全运维培训服务',
      desc:
          '针对常见的安全运维工作提供可定制化的培训服务，使被培训者通过学习了解安全巡检、日志分析、流量分析等方向的知识，从根本上帮助客户提高安全运维能力。',
    ),
    ServiceFunction(
      title: '6. CTF攻防技能培训服务',
      desc:
          '针对CTF线上赛及AWD竞赛模式提供培训服务，使被培训者通过学习了解CTF的类型、思路，达到能够解答常规CTF题目的水平，满足客户对于CTF相关技能的能力需求。',
    ),
    ServiceFunction(
      title: '7. 红队攻防技能培训',
      desc:
          '针对红队攻防提供培训服务，使被培训者通过学习了解红队攻击常用的手段和攻击思路，使客户达到能够掌握常见红队攻击技能的水平，满足客户对于自行开展部分红蓝对抗的能力需求。除此之外，也可根据客户需求，进行进一步的定制。',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '服务功能',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: COLOR_TITLE,
          ),
        ),
        const SizedBox(height: 20),

        // 服务功能网格（桌面端2列，移动端1列）
        GridView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(), // 禁止网格自身滚动
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: MediaQuery.of(context).size.width >= 1200 ? 2 : 1,
            crossAxisSpacing: 30,
            mainAxisSpacing: 30,
            childAspectRatio:
                MediaQuery.of(context).size.width >= 1200 ? 3 : 5, // 宽高比适配
          ),
          itemCount: _functions.length,
          itemBuilder: (context, index) {
            final function = _functions[index];
            return Container(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 25),
              decoration: BoxDecoration(
                color: COLOR_CARD_BG,
                borderRadius: BorderRadius.circular(8),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black12,
                    blurRadius: 4,
                    offset: const Offset(0, 2),
                  ),
                ],
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 服务标题
                  Text(
                    function.title,
                    style: const TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                      color: COLOR_TITLE,
                    ),
                  ),
                  const SizedBox(height: 15),

                  // 服务描述（自动换行，占满剩余空间）
                  Expanded(
                    child: Text(
                      function.desc,
                      style: Theme.of(context).textTheme.bodyMedium,
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ],
    );
  }
}

// 服务功能模型
class ServiceFunction {
  final String title;
  final String desc;

  ServiceFunction({required this.title, required this.desc});
}

// 模块4：3大服务优势
class _ServiceAdvantages extends StatelessWidget {
  _ServiceAdvantages();

  // 服务优势数据（含图标）
  final List<ServiceAdvantage> _advantages = [
    ServiceAdvantage(
      title: '专业的师资力量',
      desc: '360拥有大量的优秀安全专家，对各方向都有较深的造诣，因此将针对不同课题通过不同的安全专家进行全面讲解。',
      icon: Icons.person_outline,
    ),
    ServiceAdvantage(
      title: '完备的培训体系',
      desc: '360安全培训课程涵盖安全意识类、应急响应类、安全运维类、安全管理类等课程，体系完整，覆盖全面。',
      icon: Icons.menu_book_outlined,
    ),
    ServiceAdvantage(
      title: '定制化、实战型培训内容',
      desc: '360会针对每一个客户进行定制化的培训内容，并且内容以实战为主、理论为辅的宗旨进行课程培训，让学员有更深刻的印象。',
      icon: Icons.build_outlined,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '服务优势',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: COLOR_TITLE,
          ),
        ),
        const SizedBox(height: 20),

        // 服务优势横向布局（桌面端3列，移动端1列）
        LayoutBuilder(
          builder: (context, constraints) {
            final isDesktop = constraints.maxWidth >= 1024;
            return isDesktop
                ? Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: _buildAdvantageCards(),
                  )
                : Column(
                    children: _buildAdvantageCards(),
                  );
          },
        ),
      ],
    );
  }

  // 构建每个优势的卡片
  List<Widget> _buildAdvantageCards() {
    return _advantages.map((advantage) {
      return Expanded(
        child: Container(
          margin: const EdgeInsets.symmetric(horizontal: 15),
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 25),
          decoration: BoxDecoration(
            color: COLOR_CARD_BG,
            borderRadius: BorderRadius.circular(8),
            boxShadow: [
              BoxShadow(
                color: Colors.black12,
                blurRadius: 4,
                offset: const Offset(0, 2),
              ),
            ],
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 优势图标（蓝色）
              Icon(
                advantage.icon,
                size: 32,
                color: COLOR_PRIMARY,
              ),
              const SizedBox(height: 15),

              // 优势标题
              Text(
                advantage.title,
                style: const TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: COLOR_TITLE,
                ),
              ),
              const SizedBox(height: 10),

              // 优势描述
              Text(
                advantage.desc,
                style: TextStyle(
                  fontSize: 14,
                  color: COLOR_CONTENT,
                  height: 1.6,
                ),
              ),
            ],
          ),
        ),
      );
    }).toList();
  }
}

// 服务优势模型
class ServiceAdvantage {
  final String title;
  final String desc;
  final IconData icon;

  ServiceAdvantage(
      {required this.title, required this.desc, required this.icon});
}

// 模块5：客户案例
class _CustomerCases extends StatelessWidget {
  _CustomerCases();

  // 客户案例数据
  final List<String> _cases = [
    '国家税务总局贵州省税务局',
    '北京银行股份有限公司',
    '中国建设银行股份有限公司',
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          '客户案例',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: COLOR_TITLE,
          ),
        ),
        const SizedBox(height: 20),

        // 客户案例横向布局
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: _cases.map((caseName) {
            return Container(
              width: MediaQuery.of(context).size.width >= 1024 ? 300 : 250,
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),
              decoration: BoxDecoration(
                color: COLOR_CARD_BG,
                borderRadius: BorderRadius.circular(8),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black12,
                    blurRadius: 4,
                    offset: const Offset(0, 2),
                  ),
                ],
              ),
              child: Center(
                child: Text(
                  caseName,
                  style: TextStyle(
                    fontSize: 18,
                    color: COLOR_TITLE,
                    fontWeight: FontWeight.w500,
                  ),
                  textAlign: TextAlign.center,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            );
          }).toList(),
        ),
      ],
    );
  }
}
